<template>
  <div :class="$style.container">
    <i :class="sidebar ? ['iconfont', 'icon-icon-test',  $style.icon] : ['iconfont', 'icon-icon-test',  $style.icon, $style.trans]" @click.stop="handleToggleClick"></i>
    <div :class="$style.right">
      <span :class="$style.currentDate">{{currentDate}}</span>
      <span :class="$style.weather" v-if="user">
        <span>{{user.weather && user.weather.currentCity}}</span>
        <img :src="user.weather && user.weather.nightPictureUrl" v-if="(+currentDate.substring(11, 13) > 18) || (+currentDate.substring(11, 13) < 6)" />
        <img :src="user.weather && user.weather.dayPictureUrl" v-else />
        <span>{{user.weather && user.weather.weather}}</span>
        <span>{{user.weather && user.weather.temperature}}</span>
      </span>
      <el-tooltip effect="dark" content="退出全屏" placement="bottom-start" v-if="isFullScreen">
        <i :class="['iconfont', 'icon-tuichuquanping', $style.fullscreen]" @click.stop="handleQuitFullScreenClick"></i>
      </el-tooltip>
      <el-tooltip effect="dark" content="全屏" placement="bottom-start" v-else>
        <i :class="['iconfont', 'icon-quanping', $style.fullscreen]" @click.stop="handleFullScreenClick"></i>
      </el-tooltip>
      <el-tooltip effect="dark" content="刷新" placement="bottom-start" style="margin: 0 10px;font-weight: bold;">
        <i class="el-icon-refresh" @click.stop="handleRefreshClick"></i>
      </el-tooltip>

      <div :class="$style.user">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link" style="display:inline-block;">
            <img :src="this.$prefix+'downLoadFile?fileId='+user.avatar" :class="$style.avatar" v-if="user.avatar"/>
            <img src="//img.mukewang.com//54584d1d00015c0b02200220.jpg" :class="$style.avatar" v-else/>

            {{user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="margin-top:0px;">
            <el-dropdown-item command="setting">个人设置</el-dropdown-item>
            <el-dropdown-item command="quit">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
import screenfull from "screenfull";
import { removeToken } from '../utils/auth'
export default {
  data() {
    return {
      isFullScreen: false,
      currentDate: new Date().Format("yyyy-MM-dd hh:mm:ss"),
    };
  },
  computed: {
    sidebar() {
      return this.$store.getters.sidebar || {};
    },
    user() {
      return this.$store.getters.user || {};
    }
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      // 设置时间
      setInterval(() => {
        this.currentDate = new Date().Format("yyyy-MM-dd hh:mm:ss");
      }, 1000);
    },
    // 切换菜单的宽度
    handleToggleClick() {
      this.$store.commit("SET_SIDEBAR");
    },
    // 全屏
    handleFullScreenClick() {
      if (!screenfull.enabled) {
        this.$message({
          message: "you browser can not work",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle();
      this.isFullScreen = true;
    },
    // 退出全屏
    handleQuitFullScreenClick() {
      this.isFullScreen = false;
      screenfull.toggle();
    },
    // 刷新
    handleRefreshClick() {
      window.location.reload();
    },
    handleCommand (data) {
      if (data === 'setting') {
        this.$router.push({
          path: '/base/setting'
        })
      } else if (data === 'quit') {
        this.handleQuitClick()
      }
    },
    // 退出
    async handleQuitClick () {
      try {
        await this.$http.post(`/quit`)
        removeToken()
        this.$store.commit('REMOVE_USER')
        this.$router.push({
          query: '/login'
        })
      } catch(err) {
        console.log('1111:',err)
      }
    }
  }
};
</script>
<style lang="scss" module>
.container {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
  .icon {
    display: inline-block;
    margin-left: 10px;
    font-size: 20px;
    transform: rotate(0deg);
    transition: 0.38s;
    transform-origin: 50% 50%;
  }
  .trans {
    transform: rotate(90deg);
  }
  .right {
    margin-right: 60px;
    float: right;
    .currentDate {
      font-size: 16px;
      font-family: 黑体;
      color: rgb(0, 204, 255);
      margin-right: 10px;
    }
    .weather {
      display: inline-block;
      img {
        margin-right: 10px;
        height: 20px;
        width: 20px;
        vertical-align: middle;
      }
      span {
        margin-right: 10px;
        font-size:12px;
      }
    }
    .fullscreen {
      font-size: 20px;
      vertical-align: middle;
    }
    .user {
      display: inline-block;
      margin-left: 8px;
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
  }
}
</style>
